

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!doctype html>



<html>

<head>

    <title>选座</title>


    <link rel="stylesheet" type="text/css" href="css/jquery.seat-charts.css">

    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/message.js"></script>
    <script>
        function change(obj){
            let value = obj.options[obj.selectedIndex].value ;
            window.open("${pageContext.request.contextPath}/CheckSeatServlet?select="+value,'_self')
        }
        function qiehuan(obj){
            let value = obj.options[obj.selectedIndex].value ;
            window.open("${pageContext.request.contextPath}/CheckTransfer?i="+value,'_self')
        }

    </script>
    <script>
        $(function (){
            <%--console.log(${bool});--%>
            if (${bool}==0){
                toast("您不能重复购买同一天同车次座位！");
            }else if (${bool}==1){
                toast("购买成功！")
            }

        })
    </script>

</head>



<body>


<div class="container">
    ${passengerINFO.userName}<br>
    车次:${throughTrainTicket.trainNumber}  日期:${throughTrainTicket.date}<br>
    发站：${throughTrainTicket.startStation} 发时:${throughTrainTicket.startTime}<br>
    发站：${throughTrainTicket.endStation} 发时:${throughTrainTicket.endTime}<br>
        <a href="search.jsp">返回首页</a>
</div>
<div class="container">
    <select id="select" name="select" onchange="qiehuan(this)">
        <%--    获取 到的真实数据--%>
        <c:forEach items="${citys}" var="city" varStatus="s">
            <option value="${s.count}">${city.trainNumber}</option>
        </c:forEach>
    </select>
</div>



<div class="wrapper">

    <div class="container">

        <div id="seat-map">

            <div class="front-indicator">
                <select id="input_select" name="select" value="3" onchange=change(this)>
                <%--    获取 到的真实数据--%>
                    <c:forEach items="${num}" var="n" varStatus="s">
                        <option value="${n}">${n}</option>
                    </c:forEach>
                </select>
            </div>



        </div>

        <div class="booking-details">

            <h2>选座详情</h2>



            <h3> 已选座位 (<span id="counter">0</span>):</h3>

            <ul id="selected-seats"></ul>



            Total: <b>￥<span id="total">0</span></b>



            <button class="checkout-button" onclick="goto(this)" >购买</button>

<%--            href="${pageContext.request.contextPath}/BuyThroughTrainLast"--%>

            <div id="legend"></div>

        </div>

    </div>

</div>



<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script src="js/jquery.seat-charts.js"></script>



<script>
    function goto(Object){
        let a = document.getElementById("selected-seats");
        let b = a.childNodes;
        let c = b[0].innerHTML;
        let options=$("#input_select option:selected");
        console.log(options.val())
        let d = options.val()
        window.open("${pageContext.request.contextPath}/BuyThroughTrainLast?seat="+c+"&&seated="+d,'_self')
    }



    let firstSeatLabel = 1;
    $("#input_select option[value='"+${select} +"']").attr('selected','selected');
    $("#select option[value='"+${index} +"']").attr('selected','selected');

    $(document).ready(function() {

        const $cart = $('#selected-seats'),

            $counter = $('#counter'),

            $total = $('#total'),

            sc = $('#seat-map').seatCharts({

                map: [

                    'ee_ee',

                    'ee_ee',

                    'ee_ee',

                    'ee_ee',

                    'ee___',

                    'ee_ee',

                    'ee_ee',

                    'ee_ee',

                    'ee_ee',

                ],

                seats: {


                    e: {

                        price: 40,

                        classes: 'economy-class', //your custom CSS class

                        category: '硬座'

                    }


                },

                naming: {

                    top: true,

                    columns: ['A', 'B', ' ', 'D', 'F'],
                    rows: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10'],

                    getLabel: function (character, row, column) {

                        return row + column;

                    },

                },

                legend: {

                    node: $('#legend'),

                    items: [

                        ['e', 'available', '硬座'],

                        ['f', 'unavailable', '已售出']

                    ]

                },

                click: function () {

                    if (this.status() == 'available') {

                        //let's create a new <li> which we'll add to the cart items

                        $('<li>' + this.data().category + ' ' + this.settings.label + ': ￥' + this.data().price + '</li>')

                            .attr('id', 'cart-item-' + this.settings.id)

                            .data('seatId', this.settings.id)

                            .appendTo($cart);


                        /*

                         * Lets update the counter and total

                         *

                         * .find function will not find the current seat, because it will change its stauts only after return

                         * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.

                         */

                        $counter.text(sc.find('selected').length + 1);

                        $total.text(recalculateTotal(sc) + this.data().price);


                        return 'selected';

                    } else if (this.status() == 'selected') {

                        //update the counter

                        $counter.text(sc.find('selected').length - 1);

                        //and total

                        $total.text(recalculateTotal(sc) - this.data().price);


                        //remove the item from our cart

                        $('#cart-item-' + this.settings.id).remove();


                        //seat has been vacated

                        return 'available';

                    } else if (this.status() == 'unavailable') {

                        //seat has been already booked

                        return 'unavailable';

                    } else {

                        return this.style();

                    }

                }

            });


        //this will handle "[cancel]" link clicks

        $('#selected-seats').on('click', '.cancel-cart-item', function () {

            //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here

            sc.get($(this).parents('li:first').data('seatId')).click();

        });



        //let's pretend some seats have already been booked

        sc.get(${seatedSeat}).status('unavailable');



    });



    function recalculateTotal(sc) {

        var total = 0;



        //basically find every selected seat and sum its price

        sc.find('selected').each(function () {

            total += this.data().price;

        });



        return total;

    }



</script>

</body>

</html>

